@extends('base')
@section('style')
    <link rel="stylesheet" type="text/css" href="/css/idangerous.swiper2.7.6.css"/>
    <style type="text/css">
        .swiper-container{ height: 422px; }
    </style>
@stop
@section('content')
    <div class="ban_box" style="margin-top: 0;height: 422px;">
        <ul>
            <div class="arrow_left"></div>
            <div class="arrow_right"></div>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    @if(count($indexswiper)>0)
                        @foreach($indexswiper as $key=>$item)
                            @if($item->link>0)
                                <div class="swiper-slide">
                                    <a href="{{url('product/index/?pk='.$item->link)}}">
                                        <img src={{asset($item->val)}}>
                                    </a>
                                </div>
                            @else
                                <div class="swiper-slide"><img src={{asset($item->val)}}></div>
                            @endif
                        @endforeach
                    @else
                        <div class="swiper-slide"><img src="images/banner1.jpg"></div>
                        <div class="swiper-slide"><img src="images/banner2.jpg"></div>
                        <div class="swiper-slide"><img src="images/banner3.jpg"></div>
                    @endif
                </div>
            </div>
            <div class="pagination"></div>
        </ul>
    </div>

    <div class="contant" style="margin: 0;">
        <div class="contant_left">
            <ul class="productGroup">
                @foreach($parents as $parent)
                    <li>
                        <a href="{{url('/product/index/?pk='.$parent->id)}}">{{"zh_cn" == $lang ? $parent->name_cn : $parent->name}}</a>
                        <img style="display:none;" src="{{asset('img/type-'.$parent->pic.'/210-145"')}}"/>
                    </li>
                @endforeach
            </ul>
            <div class="contact_left yin_font1_no">
                <h2 class="title yin_font2">{{trans('base.CONTACT US')}}</h2>
                <p class="left_tel">0086-571-87755818<br/>0086-571-86625528<br/>0086-571-89710053</p>
                <p class="left_fax">0086-571-87755816</p>
                <p class="left_Email">lihe@lihehz.com</p>
            </div>
        </div>
        <div class="contact_right" style="margin-top: 0px;">
            <h2 class="title yin_font2" style="text-align: center;">{{trans('base.PRODUCTS1')}}</h2>
            <p class="more yin_font1"><a href="{{url('/product')}}">{{trans('base.more')}} &gt;</a></p>
            <ul class="index_cp">
                @foreach($products as $product)
                    <li>
                        <a href="{{url('/product/detail/'.$product->id)}}">
                            <?php $pic = explode(',', $product->pic)[0] ?>
                            <img src="{{asset('img/type-'.$pic.'/180-180"')}}"/>
                            <p>{{"zh_cn" == $lang ? $product->name_cn : $product->name}}</p>
                        </a>
                    </li>
                @endforeach
            </ul>
            <h2 class="title yin_font2" style="text-align: center;">{{trans('base.WE MAKE EDUCATIONAL PRODUCTS FOR YOU')}}</h2>
            <div class="index_intro_bg">
                <p class="index_intro yin_font1">{{trans('base.description')}}</p>
                <p class="index_intro yin_font1">{{trans('base.description2')}}</p>
                <p class="index_intro yin_font1">{{trans('base.description3')}}</p>
                <p class="more yin_font1"><a href="{{url('/about')}}">{{trans('base.more')}} &gt;</a></p>
            </div>
        </div>
    </div>
@stop
@section('js')
    <script src="{{ asset('js/idangerous.swiper2.7.6.min.js') }}"></script>
    <script>
        $(function () {
            $('.productGroup img').first().css('display', '');
            $('.productGroup a').on('mouseover', function () {
                //隐藏
                $(this).parent().siblings().find('img').slideUp('200');
                //显示
                $(this).next().slideDown('200');
                $(this).parent().siblings().find("a").removeClass("arrowdown");
                $(this).addClass("arrowdown");
            });

            var mySwiper = $('.swiper-container').swiper({
                autoplay:1800,
                pagination: '.pagination',
                loop:true,
                grabCursor: true,
            });

            $(".arrow_left").on('click', function(e){
                e.preventDefault()
                mySwiper.swipePrev()
            });

            $(".arrow_right").on('click', function(e){
                e.preventDefault();
                mySwiper.swipeNext();
            });
        });
        



        
    </script>
@stop